<template>
  <div class="app-container">
    <el-dialog :visible="remarkVisible" title="全部备注" @close="closeDialog">
      <ul class="remark_ul">
        <!-- {{ remarkList }} -->
        <li v-for="(item, index) in remarkList" :key="index">
          <div>
            <p>
              <span>操作人：{{ item.createUserName }}</span>
            </p>
            <p>
              <span>操作时间：{{ item.createTime | formatDateMinute }}</span>
            </p>
            <!-- 商城订单状态 -->
            <p v-if="item.orderStatus>=0 && remarkType===''">状态：{{ item.orderStatus | orderStatus }}</p>

            <!-- 酒店订单状态 -->
            <p v-if="remarkType==='hotel'">状态：{{ item.orderStatus | roomOrderStatus }}</p>
          </div>
          <p>备注：{{ item.remark }}</p>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
export default {
  filters: {
    orderStatus(num) {
      const orderMap = {
        0: '未付款',
        100: '待发货(已付款)',
        200: '已发货(待收货)',
        300: '已收货',
        400: '申请退款',
        410: '拒绝退款',
        450: '已退款',
        500: '已完成'
      }
      return num < 0 ? '已取消' : orderMap[num]
    },
    roomOrderStatus(num) {
      const orderMap = {
        0: '待支付',
        100: '已支付(待确认订单)',
        200: '已确认(确认有房)',
        210: '已入住',
        220: '未入住',
        230: '未操作',
        310: '已完成(已入住)',
        320: '已完成(未入住)',
        330: '已完成(未操作)',
        400: '申请退款',
        410: '已退款',
        420: '拒绝退款'
      }
      return num < 0 ? '已取消' : orderMap[num]
    }
  },
  props: {
    remarkList: {
      type: Array,
      required: true
    },
    remarkVisible: {
      type: Boolean,
      required: true
    },
    remarkIndex: {
      type: Number,
      required: true
    },
    remarkType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      remarklistIn: []
    }
  },
  watch: {
    remarkIndex(val) {
      this.remarkIndex = val
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:remarkVisible', false)
      this.$emit('update:remarkIndex', -1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .remark_ul {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    li {
      margin: 0;
      padding: 0;
      width: 100%;
      border-bottom: 1px solid #CCC;
    }
  }
  .el-dialog__body{
    padding: 0;
  }
</style>
